<template>
  <div class="pageContent">
    <div class="tabsAll">
      <el-tabs v-model="editableTabsValue" type="card" class="demo-tabs" @edit="handleTabsEdit">
        <el-tab-pane label="基本信息" name="0">
          <Form1></Form1>
        </el-tab-pane>
        <el-tab-pane label="认证信息" name="1">
          <Form2></Form2>
        </el-tab-pane>
        <el-tab-pane label="线上相关设置" name="2">
          <Form3></Form3>
        </el-tab-pane>
        <el-tab-pane label="其他设置" name="3">
          <Form4></Form4>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="bottomBtn">
      <el-button @click="back">返回</el-button>
      <el-button type="primary" @click="sumbit">保存</el-button>
    </div>
  </div>
</template>

<script>
  import Form1 from './form1.vue'
  import Form2 from './form2.vue'
  import Form3 from './form3.vue'
  import Form4 from './form4.vue'
  import {
    ref,
    reactive,
    toRaw
  } from 'vue'
  export default {
    name: 'FileUpload',
    components: {
      Form1,
      Form2,
      Form3,
      Form4
    },
    setup() {
      // 获取实例的引用，用于调用upload1.submit进行手动上传
      const editableTabsValue = ref('0')

      return {
        editableTabsValue
      }
    },
  }
</script>

<style lang="scss" scoped>
  .tabsAll {
    padding: 15px;
  }

  .demo-tabs {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    // border-bottom: 1px solid #eee;
  }

  .demo-tabs ::v-deep .el-tabs__content {
    width: 100%;
  }


  .custom-card {
    width: 100%;
    max-width: 1100px;
  }

  .buttonAll {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;
  }

  .el-card {
    box-shadow: none;
  }

  .table-container {
    overflow-x: auto;
  }


  .demo-tabs {
    display: flex;
    justify-content: center;
    flex-direction: column;
    // align-items: center;
  }

  v-deep .el-tabs__content {
    width: 100%
  }
</style>